<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main class="main">
        <el-row>
          <el-col :span="20" :offset="3">
            <el-card  style="padding-bottom: 20px;width: 90%">
              <div>
                <el-row>
                  <el-col :span="4" class="image">
                    <img class="univer_header" :src="college.logo" />
                  </el-col>
                  <el-col :span="10">
                    <el-row>
                      <el-col :span="15"><div class="name"><p>{{college.name}}</p></div></el-col>
                      <el-col :span="5"><div class="city"><p>{{college.region}}</p></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="18">
                        <el-button round type="view">公立大学</el-button>
                        <el-button round type="view">{{college.type}}</el-button>
                        <el-button round type="view">{{college.level}}</el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <a :href="college.website"><el-col :span="4"><el-button type="primary" icon="el-icon-search" style="position:absolute;right: 350px;top: 40px">进入官网</el-button></el-col></a>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">学校介绍</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              {{college.describes}}
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">师资介绍</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              {{college.teachers}}
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">专业录取情况</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              <el-table
                      stripe
                      :data="collegeMajors"
                      style="width: 100%;font-size:16px">
                <el-table-column
                        prop="mname"
                        label="专业名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="lowest"
                        label="最低录取分数线"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="average"
                        label="平均录取分数线">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="科目要求">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="录取人数">
                </el-table-column>
                <el-table-column label="专业介绍">
                  <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-search" @click="find(scope.row.mname)">查看详情</el-button>
                  </template>

                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">学校重点专业</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              <el-table
                      stripe
                      :data="emphasisedMajors"
                      style="width: 100%;font-size:16px">
                <el-table-column
                        prop="mname"
                        label="专业名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="lowest"
                        label="最低录取分数线"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="average"
                        label="平均录取分数线">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="科目要求">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="录取人数">
                </el-table-column>
                <el-table-column
                        label="专业介绍">
                  <el-button type="primary" icon="el-icon-search">查看详情</el-button>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>


      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";
    export default {
        name: "University",
        components: {Header,Footer},
        data() {
            return {
                college:{},
                collegeMajors:[],
                emphasisedMajors:[],
                id:""
            }

        },
        methods:{
          find(majorName){
            this.$router.push({
              path: '/major/'+majorName
            });
          },
            queryCollegeById(id){
                const _this = this;
                this.$axios.get("http://localhost:8080/colleges/queryCollegeById?id="+id).then((res)=>{
                    console.log(res.data)
                    _this.college = res.data;
                });
            },
            queryEmphasised(id){
                const _this = this;
                this.$axios.get("http://localhost:8080/college/queryEmphasisedByCid?cid="+id).then((res)=>{
                    console.log(res.data)
                    _this.emphasisedMajors = res.data;
                });
            },
            queryAllMajors(id){
                const _this = this;
                this.$axios.get("http://localhost:8080/college/queryAllMajorsByCollege?cid="+id).then((res)=>{
                    console.log(res.data)
                    _this.collegeMajors = res.data;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='../admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
            this.id = this.$route.params.collegeId
            console.log(this.id)
            this.queryCollegeById(this.id);
            this.queryEmphasised(this.id);
            this.queryAllMajors(this.id);
        }
    }
</script>

<style scoped>
  .el-main{
    margin-top: 70px;
  }
  .univerShortInfoDiv{
    margin: 10px 0 10px 0;
  }
  .univerShortInfo{
    font-size: 30px;
    font-weight: 600;
  }
  .univerShortInfoP{
    line-height: 30px;
  }
  .el-icon-edit{
    font-size: 20px;
  }

  .univerInfo{
    font-weight: 800;
    font-size: 40px;
    padding: 10px 15px 10px 15px;
    margin: 0;
    height: 40px;
    line-height: 40px;
  }
  .image{
    width: 200px;
    height: 160px;
    padding: 15px 30px 10px 30px;
  }

  .univer_header{
    width: 120px;
  }
  div .el-row{
    margin: 0;
  }

  .name{
    height: 70px;
    padding-top: 0px;
  }
  .name p{
    font-size: 40px;
    font-weight: 800;
    margin: 0;
    margin-top: 10px;
  }
  .city{
    height: 70px;
    padding-top: 0px;
  }
  .city p{
    font-size: 18px;
    margin: 0;
    margin-top: 28px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }

  .yxtuijian{
    border-left: rgb(23, 100, 182) 5px solid;
    padding-left: 20px;
    font-size: 2em;
  }
</style>
